<template>
  <div class="wrapper">
    <el-card class="form-wrapper" shadow="never">
      <el-form class="form" :model="formData" inline>
        <el-form-item label="商家" prop="merchantId">
          <el-select v-model="formData.merchantId" filterable remote reserve-keyword placeholder="输入搜索"
            :remote-method="getMerchantListApi" style="width: 240px">
            <el-option v-for="item in optionsData.merchants" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="活动名称">
          <el-input v-model="formData.activityName" clearable @keyup.enter="resetPage" />
        </el-form-item>
        <el-form-item label="卡编号">
          <el-input v-model="formData.codeNo" clearable @keyup.enter="resetPage" />
        </el-form-item>
        <el-form-item label="码号">
          <el-input v-model="formData.code" clearable @keyup.enter="resetPage" />
        </el-form-item>
        <!--
        <el-form-item label="电话">
          <el-input v-model="formData.username" clearable @keyup.enter="resetPage" />
        </el-form-item> -->
        <!-- <el-form-item label="业务员">
          <el-input v-model="formData.salesmanId" clearable @keyup.enter="resetPage" />
        </el-form-item> -->
        <el-form-item label="奖项" prop="prizeId">
          <el-select v-model="formData.prizeId" filterable remote reserve-keyword placeholder="输入搜索"
            :remote-method="getPrizeListApi" style="width: 240px">
            <el-option v-for="item in optionsData.prizes" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" style="width: 150px">
          <el-select v-model="formData.status">
            <el-option v-for="item in optionsData.codeStatus" :key="item.value" :label="item.name"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
          <!-- <el-button @click="handleExport">导出</el-button> -->
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-loading="pager.loading" shadow="never">
      <!-- <el-button type="primary" size="small" plain @click="handleGenerate">
        <template #icon>
          <icon name="el-icon-Plus" />
        </template>
生成码号
</el-button>
<el-button type="info" size="small" plain @click="handleExporta">
  <template #icon>
          <icon name="el-icon-Download" />
        </template>
  导出码号
</el-button> -->

      <div>
        <el-table :data="pager.lists" size="large" ref="tableRef" stripe>
          <el-table-column label="序号" prop="id" min-width="100" />
          <el-table-column label="卡编号" prop="codeNo" min-width="100" />
          <el-table-column label="码号" min-width="100" prop="code"></el-table-column>
          <el-table-column label="活动名称" prop="activityTitle" min-width="180" />
          <el-table-column label="商家" prop="merchantName" min-width="180" />
          <!-- <el-table-column label="客人" prop="nickname" min-width="100" />
          <el-table-column label="电话" prop="role" min-width="100">
            <template #default="{ row }">
              <div>
                <el-tooltip :content="row.role" placement="top-start">
                  <div>{{ row.role }}</div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="业务员" prop="createTime" min-width="180" /> -->
          <el-table-column label="奖项" prop="prizeName" min-width="180" />
          <el-table-column label="奖品等级" prop="prizeLevelText" min-width="180" />
          <!-- <el-table-column label="抽奖概率" prop="createTime" min-width="180" /> -->
          <el-table-column label="状态" min-width="100" prop="statusText">
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
              <el-dropdown>
                <el-button :disabled="true" link type="primary" plain>操作</el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <!-- <el-dropdown-item @click="edit">修改</el-dropdown-item> -->
                    <!-- <el-dropdown-item @click="">设置奖项</el-dropdown-item> -->
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
    <!-- <export-popup
      v-if="showExport"
      ref="exportRef"
      @success="getLists"
      @close="showExport = false"
    />
    <generate-popup
      v-if="showGenerate"
      ref="generateRef"
      @success="getLists"
      @close="showGenerate = false"
    ></generate-popup> -->
  </div>
</template>

<script lang="ts" setup>
// import { deleteUserApi } from '@/api/permission/user'
import { useDictOptions } from '@/hooks/useDictOptions'
import { listsApi as getMerchantListApi } from '@/api/merchant'
import { listsApi as getPrizeListApi } from '@/api/activity/pize'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import ExportPopup from './export.vue'
import generatePopup from './generate.vue'
import { nextTick, onMounted, reactive, ref, shallowRef } from 'vue'
import pagination from '@/components/pagination/index.vue'
import { getCodeListsApi, statusApi } from '@/api/activity/code'
import type { TableInstance } from 'element-plus'
import { dictDataLists } from '@/api/setting/dict'

const exportRef = shallowRef<InstanceType<typeof ExportPopup>>()
const generateRef = shallowRef<InstanceType<typeof generatePopup>>()
// 表单数据
const formData = reactive({
  merchantId: '',
  salesmanId: '',
  status: '',
  prizeId: '',
  code: '',
  activityName: '',
  codeNo:  '',
})
const showExport = ref(false)
const showGenerate = ref(false)
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: getCodeListsApi,
  params: formData,
})
const { optionsData } = useDictOptions<{
  merchants: Array<Record<string, any>>
  prizes: Array<Record<string, any>>
  codeStatus: Array<Record<string, any>>
}>({
  merchants: {
    api: getMerchantListApi,
    params: {
      name: '',
      pageSize: 10,
    },
    transformData: (data: any) => {
      return data.lists
    },
  },
  prizes: {
    api: getPrizeListApi,
    params: {
      name: '',
      pageSize: 10,
    },
    transformData: (data: any) => {
      return data.lists
    },
  },
  codeStatus: {
    api: dictDataLists,
    params: { dictType: 'code_status' },
    transformData(data: any) {
      return data.lists
    },
  },
})
// const handleGenerate = async () => {
//   showGenerate.value = true
//   await nextTick()
//   generateRef.value?.open()
// }
// const handleExport = async () => {
//   showExport.value = true
//   await nextTick()
//   exportRef.value?.open()
// }

// const changeStatus = async (active: any, id: number) => {
//   await statusApi({
//     id,
//     status: active,
//   })
//   feedback.msgSuccess('修改成功')
//   getLists()
// }

// const handleDelete = async (id: number) => {
//   await feedback.confirm('确定要删除？')
//   await deleteUserApi({ id })
//   feedback.msgSuccess('删除成功')
//   getLists()
// }
const tableRef = shallowRef<TableInstance>()

onMounted(() => {
  getLists()
})
</script>
<style lang="scss" scoped>
.text_hidden {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.wrapper {
  .form-wrapper {
    margin-bottom: 5px;
  }
}

.export-btn {
  margin-left: 10px;
}
</style>
